<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        *{
            font-size: 20px;
        }
        h2{
            color: pink;
            margin-left: 60px;
        }
        .box{
            width: 260px;
            height: 300px;
            border: 1px solid #777777;
            background-color: pink;
        }
        .show{
            width: 240px;
            height: 30px;
            border: 1px solid #9d9d9d;
            margin: 6px auto;
            background-color:#e6e6e6;
        }
       .btn-group{
           width: 240px;
           height: 240px;
           margin: 7px auto;
       }
        .btn{
            float: left;
            width: 42px;
            height: 42px;
            margin:3px 0px 3px 5px;

        }
        .long{
            width: 89px;
        }
    </style>
</head>
<body>
<div id="div2">
    <h2>猛男色计算器</h2>
    <div class="box">
        <div class="all">
            <div class="show">{{defNum}}</div>
            <div class="btn-group">
                <button class="btn" @click="btn('c')">C</button>
                <button class="btn">+/-</button>
                <button class="btn"  @click="btn('%')">%</button>
                <button class="btn long"  @click="btn('←')">←</button>
                <button class="btn" @click="btn('7')">7</button>
                <button class="btn" @click="btn('8')">8</button>
                <button class="btn" @click="btn('9')">9</button>
                <button class="btn" @click="btn('+')">+</button>
                <button class="btn" @click="btn('-')">-</button>
                <button class="btn" @click="btn('4')">4</button>
                <button class="btn" @click="btn('5')">5</button>
                <button class="btn" @click="btn('6')">6</button>
                <button class="btn" @click="btn('*')">x</button>
                <button class="btn" @click="btn('/')">/</button>
                <button class="btn" @click="btn('1')">1</button>
                <button class="btn" @click="btn('2')">2</button>
                <button class="btn" @click="btn('3')">3</button>
                <button class="btn" @click="btn('pf')">x²</button>
                <button class="btn" @click="btn('√')">√</button>
                <button class="btn long" @click="btn('0')">0</button>
                <button class="btn" @click="btn('·')">·</button>
                <button class="btn long" @click="btn('=')">=</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
 var  vm=  new Vue({
        el:"#div2",
        data:{
            defNum:"0",
            str:"",
            num:'',
            fh:'',

        },
        methods:{
            btn(flag){
                console.log(flag)
                switch (flag) {
                   case 'c':
                        this.defNum=0
                        break;

                   case '←':
                       console.log("sss");
                       if(this.defNum.length>1){
                           this.defNum = this.defNum.substring(0,this.defNum.length-1)
                       }else if(this.defNum.length=1){
                           this.defNum ="0";
                       }
                       vm.str="";
                        break;
                   case '7':
                        vm.str+="7"
                        vm.defNum=vm.str;
                        break
                   case '8':
                        vm.str+="8"
                        vm.defNum=vm.str;
                        break
                    case '9':
                        vm.str+="9"
                        vm.defNum=vm.str;
                        break
                    case '4':
                        vm.str+="4"
                        vm.defNum=vm.str;
                        break
                    case '5':
                        vm.str+="5"
                        vm.defNum=vm.str;
                        break
                    case '6':
                        vm.str+="6"
                        vm.defNum=vm.str;
                        break
                    case '1':
                        vm.str+="1"
                        vm.defNum=vm.str;
                        break
                    case '2':
                        vm.str+="2"
                        vm.defNum=vm.str;
                        break
                    case '3':
                        vm.str+="3"
                        vm.defNum=vm.str;
                        break
                    case '+':
                        vm.fh="+"
                        vm.num=vm.defNum;
                        vm.str=""
                        vm.defNum="0";
                        break
                    case '-':
                        vm.fh="-"
                        vm.num=vm.defNum;
                        vm.str=""
                        vm.defNum="0";
                        break
                    case '*':
                        vm.fh="*"
                        vm.num=vm.defNum;
                        vm.str=""
                        vm.defNum="0";
                        break
                    case '/':
                        vm.fh="/"
                        vm.num=vm.defNum;
                        vm.str=""
                        vm.defNum="0";
                        break
                    case '%':
                        console.log("ss")
                        vm.defNum = vm.defNum/100;
                        vm.num=vm.defNum;
                        break;
                    case 'pf':
                        console.log("ss")
                        vm.defNum = vm.defNum*vm.defNum;
                        vm.num=vm.defNum;
                        break;
                    case '√':
                        console.log("ss")
                        vm.defNum = Math.sqrt(vm.defNum);
                        vm.num=vm.defNum;
                        break;
                    case '=':
                        if(vm.fh=="+"){
                            vm.defNum = parseFloat(vm.num) +parseFloat(vm.defNum);
                        }else if(vm.fh=="-"){
                            vm.defNum = parseFloat(vm.num) -parseFloat(vm.defNum);
                        }else if (vm.fh=="*"){
                            vm.defNum = parseFloat(vm.num) *parseFloat(vm.defNum);
                        }else if (vm.fh=="/") {
                            vm.defNum = parseFloat(vm.num) /parseFloat(vm.defNum);
                        }
                        break

                }
            }
        }
    })
</script>
</html>